<template>
  <div class="big">
    <!--头部-->
    <div class="top">
      <div class="title">基于Flask框架写的商城</div>
      <div class="topa">
        <div>管理员</div>
        <div><el-link :underline="false"><div class="dle" @click="reception">退出到前台</div></el-link></div>
        <div><el-link :underline="false"><div class="dle" @click="log_out">退出登录</div></el-link></div>
      </div>

    </div>
    <!--导航栏-->
    <div>
      <el-menu :default-active="this.$route.path" mode="horizontal" background-color="#FF8E01" text-color="#000000" active-font-weight= bold; active-text-color="#000000" router @select="handleSelect">
        <el-menu-item index="/page"><i class="el-icon-s-home"></i>首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-user-solid"></i>个人中心</template>
          <el-menu-item index="/change">修改密码</el-menu-item>
          <el-menu-item index="/center">个人信息</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-eleme"></i>会员管理</template>
          <el-menu-item index="/menber">会员</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"><i class="el-icon-s-grid"></i>商品类别管理</template>
          <el-menu-item index="/category">商品类别</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title"><i class="el-icon-s-comment"></i>商品信息管理</template>
          <el-menu-item index="/information">商品信息</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title"><i class="el-icon-present"></i>商品库存管理</template>
          <el-menu-item index="/inventory">商品库存</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title"><i class="el-icon-sell"></i>出库记录管理</template>
          <el-menu-item index="/delivery">出库记录</el-menu-item>
        </el-submenu>
        <el-submenu index="8">
          <template slot="title"><i class="el-icon-sold-out"></i>入库记录管理</template>
          <el-menu-item index="/warehousing">入库记录</el-menu-item>
        </el-submenu>
        <el-submenu index="9">
          <template slot="title"><i class="el-icon-s-open"></i>销量统计管理</template>
          <el-menu-item index="/statistics">销量统计</el-menu-item>
        </el-submenu>
        <el-submenu index="10">
          <template slot="title"><i class="el-icon-microphone"></i>联想我们管理</template>
          <el-menu-item index="/service">联系我们</el-menu-item>
        </el-submenu>
        <el-submenu index="11">
          <template slot="title"><i class="el-icon-chat-square"></i>留言板管理</template>
          <el-menu-item index="/message">留言板</el-menu-item>
        </el-submenu>
        <el-submenu index="12">
          <template slot="title"><i class="el-icon-s-tools"></i>系统管理</template>
          <el-menu-item index="/carousel">轮播图管理</el-menu-item>
          <el-menu-item index="/journalism">新闻公告</el-menu-item>
        </el-submenu>
        <el-submenu index="13">
          <template slot="title"><i class="el-icon-s-claim"></i>订单管理</template>
          <el-menu-item index="13-1">修改密码</el-menu-item>
          <el-menu-item index="13-2">个人信息</el-menu-item>
        </el-submenu>
        <router-view></router-view>
      </el-menu>

    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    reception(){
      this.$router.push('/reception_page')
    },
    log_out(){
      this.$router.push('/')
    }
  },
}
</script>

<style scoped>
.big{
  background-color: #F7F8FA;
  height: 100%;
  width: 100%;
}

.top{
  display: flex;
  justify-content: space-between;
  color: #FF8E01;
  padding: 20px 20px;
  background-color: #F7F8FA;
  border-bottom: 1px solid #000000;
}
.dle{
  color: #FF8E01;
}
.title{
  font-weight: bold;
  font-size: 30px;
}
.topa{
  display: flex;
  padding-top: 10px;
  justify-content: space-between;
  width: 10%;
}







</style>
